---
import type { NoRepetition } from "#/lib/types"
import { Code, TabItem, Tabs } from "@astrojs/starlight/components"
import type { PackageManager } from "./index.ts"

interface Props {
  commands: Record<PackageManager, string>
  pkgManagers?: PackageManager[] | undefined
}

const {
  commands,
  pkgManagers = ["npm", "pnpm", "bun", "yarn"] as NoRepetition<PackageManager>,
} = Astro.props
---

<Tabs syncKey="pkgManager">
  {
    pkgManagers.map(pkgManager => (
      <TabItem label={pkgManager}>
        <Code
          lang="bash"
          twoslash={false}
          frame="none"
          class="text-sm sm:text-base size-full"
          code={commands[pkgManager]}
        />
      </TabItem>
    ))
  }
</Tabs>
